<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0px; padding: 0px }
          #map_canvas { height: 100% }
        </style>

    <title>GuiGps</title>

        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>

        <script type="text/javascript">

            var latlng;
            var latlngPoints;
            var map;
            var polyline;
                var markers;

            function initialize()
            {
                var marker;
                var markerNum;

                latlng = new google.maps.LatLng(47.389982, 0.688877);//(49.042983, 2.084826);
                var mapOptions = {
                    zoom: 17,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
                latlngPoints = new Array();

                markers = new Array();
                markerNum=0;
                google.maps.event.addListener(map, 'click', function(event)
                {
                    latlngPoints.push (event.latLng);
                    marker = new google.maps.Marker ({
                        map: map,
                        draggable: true,
                        title: '#' + markerNum,
                        position: event.latLng,
                    });
                    markers.push (marker);
                    google.maps.event.addListener (marker, 'click', function(event)
                    {
                        this.setMap(null);
                        for ( _marker in markers )
                        {
                            if ( markers[_marker] == this ) 
                            {
                                markers.splice(_marker, 1);
                                latlngPoints.splice(_marker, 1);
                                break;
                            }
                        }
                        polylineDisp();
                    });
                    google.maps.event.addListener(marker, 'drag', function(event) {
                        for ( _marker in markers )
                        {
                            if ( markers[_marker] == this ) 
                            {
                                latlngPoints[_marker] = this;
                                break;
                            }
                        }
                        updateMarkerPosition(marker.getPosition());
                    });
                    marker.setMap(map);
                    markerNum++;
                    polylineDisp();
                });

                polyline = new google.maps.Polyline();
            }

            function polylineDisp()
            {
                polyline.setMap(null);
                polyline = new google.maps.Polyline({
                    map: map,
                    path: latlngPoints,
                    strokeColor: "#0000FF",//couleur du tracé
                    strokeOpacity: 0.65,//opacité du tracé
                    strokeWeight: 5//grosseur du tracé
                });
            }

            function markerDisp()
            {
                for (point in latlngPoints){
                    new google.maps.Marker({
                        map: map,
                        draggable: true,
                        position: latlngPoints[mapCanvaspoint]
                    });
                }
            }

            function trajectoryDisp()
            {
                polylineDisp();
                markerDisp();
            }

            function displaylatlng() {
                alert("lat : " + latlng.lat().toString() + " , lng : " + latlng.lng().toString() + " coor : " + latlng.toString());
latlngPoints.push(
new google.maps.LatLng(47.423820, 0.709820),
new google.maps.LatLng(47.423298, 0.708446),
new google.maps.LatLng(47.423180, 0.707545),
new google.maps.LatLng(47.422657, 0.706558),
new google.maps.LatLng(47.422310, 0.705700),
new google.maps.LatLng(47.421902, 0.704927),
new google.maps.LatLng(47.421524, 0.704284),
new google.maps.LatLng(47.421001, 0.704155),
new google.maps.LatLng(47.420887, 0.703769),
new google.maps.LatLng(47.420856, 0.698833),
new google.maps.LatLng(47.423210, 0.698791),
new google.maps.LatLng(47.423878, 0.697417),
new google.maps.LatLng(47.423847, 0.696301),
new google.maps.LatLng(47.423790, 0.695186),
new google.maps.LatLng(47.423733, 0.693512),
new google.maps.LatLng(47.423500, 0.691066),
new google.maps.LatLng(47.423065, 0.687418),
new google.maps.LatLng(47.422947, 0.685873),
new google.maps.LatLng(47.422688, 0.683341),
new google.maps.LatLng(47.419956, 0.684028),
new google.maps.LatLng(47.418941, 0.683899),
new google.maps.LatLng(47.418594, 0.683770),
new google.maps.LatLng(47.417545, 0.683556),
new google.maps.LatLng(47.417068, 0.683620),
new google.maps.LatLng(47.416344, 0.683749),
new google.maps.LatLng(47.415920, 0.683920),
new google.maps.LatLng(47.415443, 0.684114),
new google.maps.LatLng(47.414730, 0.684221),
new google.maps.LatLng(47.414326, 0.684264),
new google.maps.LatLng(47.414223, 0.684285),
new google.maps.LatLng(47.414280, 0.685487),
new google.maps.LatLng(47.413685, 0.686731),
new google.maps.LatLng(47.409008, 0.681281),
new google.maps.LatLng(47.401154, 0.684328),
new google.maps.LatLng(47.396751, 0.686259),
new google.maps.LatLng(47.392902, 0.687783),
new google.maps.LatLng(47.392017, 0.688126),
new google.maps.LatLng(47.391113, 0.688491),
new google.maps.LatLng(47.390347, 0.688856),
new google.maps.LatLng(47.389664, 0.689070),
new google.maps.LatLng(47.388283, 0.689757),
new google.maps.LatLng(47.389301, 0.692568),
new google.maps.LatLng(47.389561, 0.692997),
new google.maps.LatLng(47.389084, 0.693555),
new google.maps.LatLng(47.388500, 0.693448),
new google.maps.LatLng(47.386887, 0.695400),
new google.maps.LatLng(47.386204, 0.695229),
new google.maps.LatLng(47.385578, 0.695486),
new google.maps.LatLng(47.384548, 0.695808),
new google.maps.LatLng(47.382877, 0.696516),
new google.maps.LatLng(47.380596, 0.697331),
new google.maps.LatLng(47.380363, 0.697203),
new google.maps.LatLng(47.379597, 0.693212),
new google.maps.LatLng(47.374916, 0.695057),
new google.maps.LatLng(47.374001, 0.695422),
new google.maps.LatLng(47.373959, 0.694628),
new google.maps.LatLng(47.373856, 0.693662),
new google.maps.LatLng(47.373577, 0.692117),
new google.maps.LatLng(47.373070, 0.689628),
new google.maps.LatLng(47.373013, 0.689178),
new google.maps.LatLng(47.371952, 0.688727),
new google.maps.LatLng(47.370136, 0.687654),
new google.maps.LatLng(47.369305, 0.687461),
new google.maps.LatLng(47.367928, 0.687032),
new google.maps.LatLng(47.368057, 0.685143),
new google.maps.LatLng(47.367577, 0.684414),
new google.maps.LatLng(47.366444, 0.684092),
new google.maps.LatLng(47.366356, 0.683749),
new google.maps.LatLng(47.366707, 0.680895),
new google.maps.LatLng(47.367111, 0.678577),
new google.maps.LatLng(47.367577, 0.675938),
new google.maps.LatLng(47.365528, 0.675037),
new google.maps.LatLng(47.363712, 0.674329),
new google.maps.LatLng(47.362228, 0.673749),
new google.maps.LatLng(47.360294, 0.671003),
new google.maps.LatLng(47.359730, 0.669115),
new google.maps.LatLng(47.359161, 0.668600),
new google.maps.LatLng(47.357548, 0.667999),
new google.maps.LatLng(47.356995, 0.666583),
new google.maps.LatLng(47.355976, 0.664995),
new google.maps.LatLng(47.354771, 0.664308),
new google.maps.LatLng(47.353928, 0.663879),
new google.maps.LatLng(47.352634, 0.663342),
new google.maps.LatLng(47.351067, 0.662613),
new google.maps.LatLng(47.350601, 0.662613),
new google.maps.LatLng(47.349480, 0.663235),
new google.maps.LatLng(47.348854, 0.663407),
new google.maps.LatLng(47.348083, 0.663171),
new google.maps.LatLng(47.347446, 0.662892),
new google.maps.LatLng(47.347214, 0.662763),
new google.maps.LatLng(47.347038, 0.661991),
new google.maps.LatLng(47.346310, 0.662119),
new google.maps.LatLng(47.345135, 0.662291),
new google.maps.LatLng(47.344231, 0.662484),
new google.maps.LatLng(47.344158, 0.660896),
new google.maps.LatLng(47.343708, 0.660038),
new google.maps.LatLng(47.342819, 0.659974),
new google.maps.LatLng(47.341702, 0.660832),
new google.maps.LatLng(47.339581, 0.659008),
new google.maps.LatLng(47.339462, 0.658493),
new google.maps.LatLng(47.339027, 0.657849),
new google.maps.LatLng(47.338066, 0.657806)
);
trajectoryDisp();
            }// onclick="displaylatlng();"

            function listlatlng() {
                var msg;
//"lat : " + latlng.lat().toString() + " , lng : " + latlng.lng().toString() + " coor : " + latlng.toString()
                for (point in latlngPoints){
                    msg = msg + latlngPoints[point].toString() + "\n"
                }
                alert(msg);
/*
var msg="";
for ( marker in markers ){
msg = msg + markers[marker].getTitle() + " " + latlngPoints[marker].toString() + "\n"
}alert(msg);
*/
/*var msg="";
for ( point in latlngPoints ){
for ( var i = 0; i < latlngPoints.length; i++ )
msg = msg + markers[i].getTitle() + " " + latlngPoints[i].toString() + "\n"
}alert(msg);

var msg="";
for ( marker in markers ){
msg = msg + markers[marker].getTitle() + "\n"
}
for ( point in latlngPoints ){
msg = msg + latlngPoints[point].toString() + "\n"
}alert(msg);*/
            }// onclick="listlatlng();"

        </script>
    </head>

    <body onload="initialize()">
        <div id="mapCanvas" style="width:100%; height:100%"></div>
        <noscript>
            <p>Attention : </p>
            <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
            <p>Or, il semble que JavaScript est désactivé ou qu\'il ne soit pas supporté par votre navigateur.</p>
            <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
        </noscript>
    </body>

</html>
